<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: gainsboro;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>任务列表</h1>
        <div>
            任务总数 {{arr.length}};还有{{fn()}}未完成; 【<a href="#" @click="del()">完成</a>】
        </div>
        <div v-for="(item,index) in arr">
            <input type="checkbox" @click="fn(item)" v-model="item.has"> 
            <span v-show="!item.edit" @click="edit(index)" :class="{active:item.has}">{{item.name}}</span>
            <input type="text" v-model="item.name" v-show="item.edit" @blur="item.edit=false">
        </div>
        <input type="text" v-model="msg"> <button @click="add">添加</button>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            arr:[
                {name:"设计1",has:false,edit:false},
                {name:"设计2",has:false,edit:false},
                {name:"设计3",has:false,edit:false},
            ],
            msg:''
        },
        methods:{
            fn(){
                let num =0
                this.arr.forEach(v=>{
                    if(!v.has){
                        num++
                    }
                })
                return num
            },
            del(){
                let temp = this.arr
                this.arr = []
                temp.forEach(v=>{
                    if(!v.has){
                        this.arr.push(v)
                    }
                })
            },
            add(){
                this.arr.push({name:this.msg,has:false,edit:false})
                this.msg = ''
            },
            edit(i){
                if(this.arr[i].has) return
                this.arr[i].edit = true
            }
        }
    })
</script>
</html>